<template>
  <span class="binding-classification-text">
    <span class="toBind" @click="bindingClassification(value)">未绑定 ></span>
    <teleport to="#app">
      <BindingClassificationModal ref="bindingClassificationModal" :selectItem="selectItem" />
    </teleport>
  </span>
</template>

<script lang="ts" setup name="BindingClassificationText">
import BindingClassificationModal from './components/BindingClassificationModal.vue'
import { RESOURCE_LIBRARY_SITE_CLASSIFICATION } from '@/stores/modules/collect-manage/select-data-source'
import type { ResourceLibrarySiteClassificationType } from '@/stores/modules/collect-manage/select-data-source'
import { ref } from 'vue'

type Props = { value: number }
const props = defineProps<Props>()
const { value } = props

// 绑定分类
const bindingClassificationModal = ref()
// let selectItem: ResourceLibrarySiteClassificationType = { label: '', value: null, isBind: null }
let selectItem = ref<ResourceLibrarySiteClassificationType>({ label: '', value: null, isBind: null })

// 获取当前点击的分类
const currentSiteClassificationItem = (val: number) => {
  return RESOURCE_LIBRARY_SITE_CLASSIFICATION.find((f) => f.value === val) as ResourceLibrarySiteClassificationType
}
const bindingClassification = (val: number) => {
  selectItem.value = currentSiteClassificationItem(val)

  if (!selectItem.value.isBind) bindingClassificationModal.value.visible = true
  // console.log(selectItem.value)
}
</script>

<style lang="less" scoped>
.binding-classification-text {
  .toBind {
    color: #fe4c4d;
    cursor: pointer;
    margin-left: 8px;
  }
}
</style>
